<template>
  <div class="chat_box_1">
    <dv-border-box7>
      <dv-loading v-if="loading" />
      <template v-else>
        <title-box title="客户结构" />

        <div class="chat_box_content flex">
          <div id="chat1" class="flex-1 chat_box_item" />
          <div id="chat2" class="flex-1 chat_box_item" />
        </div>
      </template>
    </dv-border-box7>
  </div>
</template>

<script>
import * as echarts from "echarts";

import TitleBox from "./title_box.vue";

export default {
  components: {
    TitleBox,
  },

  data() {
    return {
      loading: true,
      sexData: [],
      ageData: [],
      areaData: [],
      politicalData: [],
    };
  },

  mounted() {
    this.fetchData();
  },

  methods: {
    async fetchData() {
      try {
        this.loading = true;
        this.sexData = [
          {
            value: 3,
            name: "男",
          },
          {
            value: 0,
            name: "女",
          },
        ];
        this.areaData = [
          {
            value: 2,
            name: "江西省",
          },
          {
            value: 2,
            name: "萍乡市",
          },
          {
            value: 1,
            name: "外省",
          },
        ];
        this.politicalData = [
          {
            value: 2,
            name: "党员",
          },
          {
            value: 0,
            name: "共青团",
          },
          {
            value: 1,
            name: "群众",
          },
        ];
        this.ageData = [
          {
            value: 1,
            name: "0-18岁",
          },
          {
            value: 0,
            name: "18-30岁",
          },
          {
            value: 2,
            name: "30-40岁",
          },
          {
            value: 0,
            name: "40-50岁",
          },
          {
            value: 0,
            name: "50岁以上",
          },
        ];
        this.$nextTick(() => {
          this.initChart1();
          this.initChart2();
        });
      } finally {
        this.loading = false;
      }
    },

    initChart1() {
      var myChart = echarts.init(document.getElementById("chat1"));
      const options = {
        color: ["#F9A06C", "#9B60FA", "#FA648B", "#9B60FA", "#8CF7C9"],
        tooltip: {
          alwaysShowContent: false,
          show: true,
          trigger: "item",
          formatter: "{b}<br/> {c} ({d}%)",
          confine: true,
          backgroundColor: "rgba(255,255,255,0.7)",
        },

        series: [
          {
            name: "人才性别",
            type: "pie",
            selectedMode: "single",
            radius: ["0%", "75%"],
            label: {
              position: "inner",
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1548, name: "男", itemStyle: { color: "#0F95F1" } },
              { value: 775, name: "女", itemStyle: { color: "#8CF7C9" } },
            ],
          },

          // {
          //   name: "人才年龄段",
          //   type: "pie",
          //   radius: ["40%", "55%"],
          //   labelLine: {
          //     show: true,
          //     smooth: true,
          //     length: 10,
          //     length2: 5,
          //     minTurnAngle: 60,
          //     lineStyle: {
          //       cap: "round",
          //     },
          //   },
          //   label: {
          //     color: "#fff",
          //     show: true,
          //   },
          //   data: [
          //     { value: 1048, name: "0-18岁" },
          //     { value: 335, name: "18-30岁" },
          //     { value: 310, name: "30-40岁" },
          //     { value: 251, name: "40-50岁" },
          //     { value: 234, name: "50岁以上" },
          //   ],
          // },
        ],
      };

      myChart.setOption(options);
    },

    initChart2() {
      var myChart = echarts.init(document.getElementById("chat2"));
      const options = {
        color: ["#F9A06C", "#FA648B", "#0F95F1", "#45DFDD", "#6785EB", "#C770FB"],
        tooltip: {
          show: true,
          trigger: "item",
          formatter: "{b}<br/> {c} ({d}%)",
          confine: true,
          backgroundColor: "rgba(255,255,255,0.7)",
        },

        series: [
          {
            name: "户籍",
            type: "pie",
            selectedMode: "single",
            radius: ["0", "75%"],
            label: {
              position: "inner",
            },

            labelLine: {
              show: false,
            },
            data: [
              { value: 1548, name: "萍乡" },
              { value: 775, name: "江西" },
              { value: 1775, name: "外省" },
            ],
          },
        ],
      };

      myChart.setOption(options);
    },
  },
};
</script>

<style lang="scss" scoped>
.chat_box_1 {
  z-index: 99;
  box-sizing: border-box;
  padding: 10px;
  position: absolute;
  left: 2vw;
  top: 7vh;
  width: 28%;
  height: 28vh;
  .chat_box_content {
    width: 100%;
    display: flex;
    height: calc(28vh - 7vh);
    .chat_box_item {
      height: 100%;
    }
  }
}
</style>
